<template>
  <div class="setting-content inside-comment">
   <div class="setting-item">
      <el-form class="setting-form" :model="settingForm" label-width="100px" :disabled="formDisabled" >
        <h2 class="form-header">系统设置</h2>
        <div class="form-info">
          <el-form-item label="系统名称" prop="sysName">
            <el-input placeholder="输入系统名称" v-model="settingForm.config.sysName"></el-input>
          </el-form-item>
          <el-form-item label="LOGO" prop="sysFrontLogo">
            <div class="form-img" @click="!formDisabled && handleUpload('sysFrontLogo')">
              <div class="has-img" v-if="settingForm.config.sysFrontLogo">
                <img :src="settingForm.config.sysFrontLogo" alt="" />
                <span @click.stop="!formDisabled && handleRemoveImg('thumb')">
                  <el-icon><Delete /></el-icon>
                </span>
              </div>
              <el-icon v-else><Plus /></el-icon>
            </div>
          </el-form-item>
          <el-form-item label="版权信息" prop="copyrightInfo" style="margin-right: 5%;">
            <el-input placeholder="输入版权信息" v-model="settingForm.config.addition.copyrightInfo" ></el-input>
          </el-form-item>
          <el-form-item label="ICP备案" prop="icpRecordNumber">
            <el-input placeholder="输入ICP备案" v-model="settingForm.config.addition.icpRecordNumber"></el-input>
            <el-input placeholder="输入链接" v-model="settingForm.config.addition.icpRecordUrl"></el-input>
          </el-form-item>
          <el-form-item label="公网安备" prop="beianRecordNumber">
            <el-input placeholder="输入公网安备" v-model="settingForm.config.addition.beianRecordNumber"></el-input>
            <el-input placeholder="输入链接" v-model="settingForm.config.addition.beianRecordUrl"></el-input>
          </el-form-item>
        </div>
        <h2 class="form-header">用户设置</h2>
        <div class="form-info">
          <el-form-item label="允许注册">
            <el-switch v-model="settingForm.config.openRegister" />
          </el-form-item>
          <!-- 用户反馈默认表单选择 -->
          <el-form-item label="选择反馈表单">
            <el-select v-model="settingForm.config.feedbackFormTemplateId" placeholder="选择用户反馈默认表单" style="width: 240px">
              <el-option
                v-for="item in formList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="登录失败限制">
            <el-switch v-model="settingForm.config.enableLoginFailureLimit" />
          </el-form-item>
        </div>
        <!-- 其他自定义信息  隐私声明-->
        <h2 class="form-header">其他设置</h2>
        <div class="form-info">
          <el-form-item label="法律条款">
            <el-switch v-model="settingForm.config.addition.ifLegal" />
          </el-form-item>
          <el-form-item label="条款内容"  prop="legalContent" v-if="settingForm.config.addition.ifLegal" style="width: 100%;">
            <el-input placeholder="输入条款内容" type="textarea" v-model="settingForm.config.addition.legalContent" :autosize="{ minRows: 2, maxRows: 6 }"/>
          </el-form-item>
          <el-form-item label="隐私协议">
            <el-switch v-model="settingForm.config.addition.ifPrivacy" />
          </el-form-item>
          <el-form-item label="协议内容" prop="privacyContent" v-if="settingForm.config.addition.ifPrivacy"  style="width: 100%;">
            <el-input placeholder="输入隐私协议" type="textarea" v-model="settingForm.config.addition.privacyContent" :autosize="{ minRows: 2, maxRows: 6 }"/>
          </el-form-item>
        </div>
      </el-form>
      <div class="fotter">
        <el-button @click="formDisabled = false" size="default">编辑</el-button>
        <el-button type="primary" @click="FormSubmit" size="default" :disabled="formDisabled">保存</el-button>
      </div>
    </div>
    <!-- 图片上传  -->
    <FilesUpload v-if="showFilesUpload" v-model:showDialog="showFilesUpload" :isPublic="true" :modelId="1" :limit="1" @getFileList="insertFiles" :isToJpg="true"></FilesUpload>
  
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { 
  pagingConfig, 
  saveConfig, 
  // selectfunction,
  // updateFunction
 } from '@/api/setting'
import { Plus, Delete } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import { FilesUpload } from "@ruifox-cms/components"
import { selectPagePaper } from '@/api/form' 

//获取基本设置信息
const system = ref({
  "currentPage": 1,
  "pageSize": 10,
  "name": "",
  "using": true,
})
const getInfo = async () => {
  const res = await pagingConfig(system.value)
  settingForm.value = res.data.list[0]
  settingForm.value.config.addition = JSON.parse(settingForm.value.config.addition);
  console.log("addition",settingForm.value.config.addition);
}
getInfo()

const defaultSetting = reactive({
  name: "系统设置",
  remarks: "",
  enabled: true,
  config: {
    sysName: "考试学习系统",
    sysFrontLogo: "",
    sysBackLogo: "",
    openRegister: true,
    feedbackFormTemplateId: "",
    enableLoginFailureLimit: true,
    toggles: {
      additionalProperties1: {
        path: "",
        name: "",
        enabled: true,
        methods: {
          additionalProperties1: {
            path: "",
            name: "",
            enabled: true
          }
        }
      }
    },
    addition: {  //其他自定义信息 JSON格式保存
      copyrightInfo: "",
      icpRecordNumber: "",
      icpRecordUrl: "",
      beianRecordNumber: "",
      beianRecordUrl: "",
      ifLegal: false,
      legalContent: "",
      ifPrivacy: false,
      privacyContent: ""
    }
  }
})
const settingForm = ref({...defaultSetting})

const formDisabled = ref(true)
//保存基本设置信息
const FormSubmit = async () => {
  if (typeof settingForm.value.config.addition != 'string') {
    settingForm.value.config.addition = JSON.stringify(settingForm.value.config.addition);
  }
  try {
    const res = await saveConfig(settingForm.value);
    if (res.code === 20000) {
      ElMessage.success("更新成功");
    }
    getInfo()
  } catch (error) {
    ElMessage.warning("更新失败");
    console.log("error",error);
    
  }
}
//获取留言设置
const commentSetting = ref()
const getCommentSetting = async () => {
  // const res = await selectfunction()
  const res = {
    "code": 20000,
    "success": true,
    "message": "ok",
    "data": {
        "id": 1,
        "progressReminder": true,
        "testReminder": true,
        "showPlaybackSpee": true,
        "playbackSpeed": [],
        "playbackList": ['0.75倍速','1倍速', '1.25倍速', '1.5倍速', '2倍速'],
        "multipleClass": true,
        "dragProgressBar": false,
        "sharpnessSwitching":true,
        "multipleDevices":true
      }
  }
  commentSetting.value = res.data 
  console.log("commentSetting.value",commentSetting.value);
}


// 附件上传
const showFilesUpload = ref(false)
const resourceFormList = ref([])
const insertFiles = filesList => {
  resourceFormList.value = filesList.map(item => {
    return {
      resourceData: {
        title: item.name,
        url: item.url,
      },
      needUpload: item.needUpload,
      tagList: item.tagList || [],
    }
  })
  console.log("resourceFormList.value111",resourceFormList.value);
  // theFile.value = resourceFormList.value[0].resourceData.url
  settingForm.value.config.sysFrontLogo = resourceFormList.value[0].resourceData.url
  
}
// const theFile = ref(null)

const handleUpload = async () => { 
  showFilesUpload.value = true;
};

const handleRemoveImg = async () => { 
  settingForm.value.config.sysFrontLogo = ""
};
const theForm = ref({
  searchText: "",
  status:2,
  qsType:1,
  sort:0,
  currentPage:1,
  pageSize:10,
  total:0
})
const formList = ref([])
const getPaper = async () => {
  const res = await selectPagePaper(theForm.value)
  if (res.code === 20000) {
    // console.log("res",res);
    formList.value = res.data.list
  }
}
onMounted(() => {
  getCommentSetting()
  getPaper()

})

</script>

<style lang="scss" scoped>
  .setting-content{
    display: flex;
  }
  .setting-item{
    padding: 20px;
    margin-right: 20px;
    box-shadow: var(--card-hover-shadow, 1px 1px 4px 0 rgba(0, 0, 0, .13));
    ::v-deep .el-checkbox{
      margin-right: 12px;
    }
  }
  .setting-form{
    /* width: 500px; */
    max-width: 98%;
   
    .el-form-item {
      width: 48%;
      align-items: start;
    }
    ::v-deep *{
      font-size: 14px;

    }
    ::v-deep svg{
      font-size: 16px;

    }
    .form-header{
      margin: 10px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      font-size: 18px;
      &:first-child{
        margin-top: 0;
      }
    }
    .form-info{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .item-row{
      span{
        margin-right: 10px;
        color: $black_2;
        font-size: 14px;
      }
    
    }
  }
  .form-img{
    height: 100px;
    width: 150px;
    border: 1px dashed $borderColor;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    .has-img{
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        max-width: 100%;
        max-height: 100%;
      }
      span{
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        background-color: $failColor;
        height: 20px;
        width: 20px;
        font-size: 18px;
        color: #fff;
      }
      &:hover{
        span{
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    } 
  }
  ::v-deep .el-input+.el-input{
    margin-top: 10px;
  }
  .fotter{
    display: flex;
    justify-content: end;
  }
  .system-form{
    display: flex;

  }
</style>